<template>
  <div class="app-container">
    <div class="search-bar">
      <!--多条件查询表单-->
      <el-form
        :inline="true"
        class="demo-form-inline"
        size="mini"
      >
        <el-form-item label="井号">
          <el-select v-model="value" clearable filterable placeholder="请输入井号" style="width:130px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="作业区">
          <el-select v-model="value01" clearable filterable placeholder="请选择作业区" style="width:130px">
            <el-option
              v-for="item in site"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="teacherQuery.antiWaxProcess" clearable placeholder="请选择审批状态" style="width:150px">
            <el-option label="未审批" value="beijing" />
            <el-option label="作业区审批未通过" value="beijing" />
            <el-option label="作业区审批通过" value="beijing" />
            <el-option label="工艺所审批未通过" value="beijing" />
            <el-option label="工艺所审批通过" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="日期">
          <el-date-picker
            v-model="teacherQuery.begin"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
            type="date"
            style="width:150px"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="teacherQuery.end"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
            type="date"
            style="width:150px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getListPage()">查询</el-button>
          <el-button type="default" @click="resetData()">清空</el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="$router.push('abnormalInsert')"
          >新增</el-button>
        </el-form-item>
        <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" size="mini" @click="useExportUtil">
          导出
        </el-button>

      </el-form>
    </div>

    <div class="content">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        fit
        stripe
        height="700"
        highlight-current-row
        element-loading-text="数据加载中"
      >
        <el-table-column prop="date" label="序号" width="70" align="center" fixed>
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column fixed prop="wellName" label="井号" width="80" align="center" />

        <el-table-column prop="applicantUnit" label="申请单位" width="120" align="center" />

        <el-table-column label="正常生产情况" align="center">
          <el-table-column prop="normalDailyLiquidProduction" label="日产液量（T）" width="80" align="center" />
          <el-table-column prop="normalWatery" label="含水（%）" width="80" align="center" />
          <el-table-column prop="normalPumpCondition" label="泵况" width="80" align="center" />
          <el-table-column prop="normalSinking" label="沉没度（m）" width="80" align="center" />
        </el-table-column>

        <el-table-column label="异常生产情况" align="center">
          <el-table-column prop="abnormalDailyLiquidProduction" label="日产液量（T）" width="80" align="center" />
          <el-table-column prop="abnormalWatery" label="含水（%）" width="80" align="center" />
          <el-table-column prop="abnormalPumpCondition" label="泵况" width="80" align="center" />
          <el-table-column prop="abnormalSinking" label="沉没度（m）" width="80" align="center" />
        </el-table-column>

        <el-table-column prop="lastWorkoverTime" label="最后一次修井时间" width="120" align="center" />

        <el-table-column prop="siteDiagnostics" label="诊断原因" width="150" align="center" />

        <el-table-column label="申请异常热洗" align="center">
          <el-table-column prop="applicationPerson" label="申请人" width="80" align="center" />
          <el-table-column prop="applicationDate" label="申请时间" width="80" align="center" />
        </el-table-column>

        <el-table-column label="本次用液量及热洗温度要求" align="center">
          <el-table-column
            prop="value"
            label="用液量（m3）"
            width="120"
            align="center"
          />

          <el-table-column label="前置量" align="center">
            <el-table-column
              prop="normalDailyLiquidProduction"
              label="前置量（m3）"
              width="80"
              align="center"
            />
            <el-table-column
              prop="normalWatery"
              label="温度上限（℃）"
              width="80"
              align="center"
            />
            <el-table-column
              prop="normalPumpCondition"
              label="温度下限（℃）"
              width="80"
              align="center"
            />
          </el-table-column>

          <el-table-column label="热洗量" align="center">
            <el-table-column
              prop="abnormalDailyLiquidProduction"
              label="热洗量（m3）"
              width="80"
              align="center"
            />
            <el-table-column
              prop="abnormalWatery"
              label="温度上限（℃）"
              width="80"
              align="center"
            />
            <el-table-column
              prop="abnormalPumpCondition"
              label="温度下限（℃）"
              width="80"
              align="center"
            />
          </el-table-column>

          <el-table-column label="顶替量" align="center">
            <el-table-column
              prop="abnormalDailyLiquidProduction"
              label="顶替量（m3）"
              width="80"
              align="center"
            />
            <el-table-column
              prop="abnormalWatery"
              label="温度上限（℃）"
              width="80"
              align="center"
            />
            <el-table-column
              prop="abnormalPumpCondition"
              label="温度下限（℃）"
              width="80"
              align="center"
            />
          </el-table-column>
        </el-table-column>

        <el-table-column label="作业区审批" align="center">
          <el-table-column prop="areaOpinion" label="意见" width="150" align="center" />
          <el-table-column prop="areaApprover" label="审批人" width="80" align="center" />
          <el-table-column prop="areaApproverDate" label="审批时间" width="80" align="center" />
        </el-table-column>

        <el-table-column label="工艺所审批" align="center">
          <el-table-column prop="craftOpinion" label="意见" width="150" align="center" />
          <el-table-column prop="craftApprover" label="审批人" width="80" align="center" />
          <el-table-column prop="craftApproverDate" label="审批时间" width="80" align="center" />
        </el-table-column>

        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              style="margin-right: 5px"
              @click="goDetail"
            >修改</el-link>
            <el-link
              type="danger"
              :underline="false"
              :disabled="readonly"
              @click=""
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>

      <!--分页组件-->
      <Pagination
        :page.sync="page"
        :limit.sync="limit"
        :total="total"
        @change-page="changePage"
      />
    </div>
  </div>

</template>

<script>
import teacher from '@/api/ledger/ledger'
import Pagination from '@/components/pagination.vue'

export default {
  name: 'ErrorApplication',
  components: { Pagination },

  data() {
    return {
      form: [],
      drawer: false,
      innerDrawer: false,
      teacherQuery: {},
      downloadLoading: false,
      site: [{
        value: '选项1',
        label: '第一作业区'
      }, {
        value: '选项2',
        label: '第二作业区'
      }, {
        value: '选项3',
        label: '第三作业区'
      }, {
        value: '选项4',
        label: '第四作业区'
      }, {
        value: '选项5',
        label: '第五作业区'
      }],

      options: [{
        value: '选项1',
        label: 'T86105'
      }, {
        value: '选项2',
        label: '白863'
      }, {
        value: '选项3',
        label: '7826'
      }, {
        value: '选项4',
        label: '85149'
      }, {
        value: '选项5',
        label: '85131'
      }],
      value: '',
      value01: '',

      list: [],
      page: 1,
      limit: 10,
      total: 0,

      dialogUpdateFormVisible: false,

      tableData: [{
        wellName: 9527,
        applicantUnit: '第0采油作业区',
        normalDailyLiquidProduction: 1,
        normalWatery: 1,
        normalPumpCondition: '难说',
        normalSinking: 1,
        abnormalDailyLiquidProduction: '很糟糕',
        abnormalWatery: 100,
        abnormalPumpCondition: '很糟糕',
        abnormalSinking: 100,
        lastWorkoverTime: '2022/1/1',
        antiWaxMethod: '洛阳铲',
        siteDiagnostics: '没问题',
        applicationReason: '我觉得有问题',
        applicationPerson: 'boyu',
        applicationDate: '2022/1/1',
        opinion: '弄你的弄',
        approverPerson: 'bo',
        approverDate: '2022/1/1'
      },
      {
        wellName: 9527,
        applicantUnit: '第0采油作业区',
        normalDailyLiquidProduction: 1,
        normalWatery: 1,
        normalPumpCondition: '难说',
        normalSinking: 1,
        abnormalDailyLiquidProduction: '很糟糕',
        abnormalWatery: 100,
        abnormalPumpCondition: '很糟糕',
        abnormalSinking: 100,
        lastWorkoverTime: '2022/1/1',
        antiWaxMethod: '洛阳铲',
        siteDiagnostics: '没问题',
        applicationReason: '我觉得有问题',
        applicationPerson: 'boyu',
        applicationDate: '2022/1/1',
        opinion: '弄你的弄',
        approverPerson: 'bo',
        approverDate: '2022/1/1'
      },
      {
        wellName: 9527,
        applicantUnit: '第0采油作业区',
        normalDailyLiquidProduction: 1,
        normalWatery: 1,
        normalPumpCondition: '难说',
        normalSinking: 1,
        abnormalDailyLiquidProduction: '很糟糕',
        abnormalWatery: 100,
        abnormalPumpCondition: '很糟糕',
        abnormalSinking: 100,
        lastWorkoverTime: '2022/1/1',
        antiWaxMethod: '洛阳铲',
        siteDiagnostics: '没问题',
        applicationReason: '我觉得有问题',
        applicationPerson: 'boyu',
        applicationDate: '2022/1/1',
        opinion: '弄你的弄',
        approverPerson: 'bo',
        approverDate: '2022/1/1'
      },
      {
        wellName: 9527,
        applicantUnit: '第0采油作业区',
        normalDailyLiquidProduction: 1,
        normalWatery: 1,
        normalPumpCondition: '难说',
        normalSinking: 1,
        abnormalDailyLiquidProduction: '很糟糕',
        abnormalWatery: 100,
        abnormalPumpCondition: '很糟糕',
        abnormalSinking: 100,
        lastWorkoverTime: '2022/1/1',
        antiWaxMethod: '洛阳铲',
        siteDiagnostics: '没问题',
        applicationReason: '我觉得有问题',
        applicationPerson: 'boyu',
        applicationDate: '2022/1/1',
        opinion: '弄你的弄',
        approverPerson: 'bo',
        approverDate: '2022/1/1'
      },
      {
        wellName: 9527,
        applicantUnit: '第0采油作业区',
        normalDailyLiquidProduction: 1,
        normalWatery: 1,
        normalPumpCondition: '难说',
        normalSinking: 1,
        abnormalDailyLiquidProduction: '很糟糕',
        abnormalWatery: 100,
        abnormalPumpCondition: '很糟糕',
        abnormalSinking: 100,
        lastWorkoverTime: '2022/1/1',
        antiWaxMethod: '洛阳铲',
        siteDiagnostics: '没问题',
        applicationReason: '我觉得有问题',
        applicationPerson: 'boyu',
        applicationDate: '2022/1/1',
        opinion: '弄你的弄',
        approverPerson: 'bo',
        approverDate: '2022/1/1'
      },
      {
        wellName: 9527,
        applicantUnit: '第0采油作业区',
        normalDailyLiquidProduction: 1,
        normalWatery: 1,
        normalPumpCondition: '难说',
        normalSinking: 1,
        abnormalDailyLiquidProduction: '很糟糕',
        abnormalWatery: 100,
        abnormalPumpCondition: '很糟糕',
        abnormalSinking: 100,
        lastWorkoverTime: '2022/1/1',
        antiWaxMethod: '洛阳铲',
        siteDiagnostics: '没问题',
        applicationReason: '我觉得有问题',
        applicationPerson: 'boyu',
        applicationDate: '2022/1/1',
        opinion: '弄你的弄',
        approverPerson: 'bo',
        approverDate: '2022/1/1'
      },
      {
        wellName: 9527,
        applicantUnit: '第0采油作业区',
        normalDailyLiquidProduction: 1,
        normalWatery: 1,
        normalPumpCondition: '难说',
        normalSinking: 1,
        abnormalDailyLiquidProduction: '很糟糕',
        abnormalWatery: 100,
        abnormalPumpCondition: '很糟糕',
        abnormalSinking: 100,
        lastWorkoverTime: '2022/1/1',
        antiWaxMethod: '洛阳铲',
        siteDiagnostics: '没问题',
        applicationReason: '我觉得有问题',
        applicationPerson: 'boyu',
        applicationDate: '2022/1/1',
        opinion: '弄你的弄',
        approverPerson: 'bo',
        approverDate: '2022/1/1'
      },
      {
        wellName: 9527,
        applicantUnit: '第0采油作业区',
        normalDailyLiquidProduction: 1,
        normalWatery: 1,
        normalPumpCondition: '难说',
        normalSinking: 1,
        abnormalDailyLiquidProduction: '很糟糕',
        abnormalWatery: 100,
        abnormalPumpCondition: '很糟糕',
        abnormalSinking: 100,
        lastWorkoverTime: '2022/1/1',
        antiWaxMethod: '洛阳铲',
        siteDiagnostics: '没问题',
        applicationReason: '我觉得有问题',
        applicationPerson: 'boyu',
        applicationDate: '2022/1/1',
        opinion: '弄你的弄',
        approverPerson: 'bo',
        approverDate: '2022/1/1'
      },
      {
        wellName: 9527,
        applicantUnit: '第0采油作业区',
        normalDailyLiquidProduction: 1,
        normalWatery: 1,
        normalPumpCondition: '难说',
        normalSinking: 1,
        abnormalDailyLiquidProduction: '很糟糕',
        abnormalWatery: 100,
        abnormalPumpCondition: '很糟糕',
        abnormalSinking: 100,
        lastWorkoverTime: '2022/1/1',
        antiWaxMethod: '洛阳铲',
        siteDiagnostics: '没问题',
        applicationReason: '我觉得有问题',
        applicationPerson: 'boyu',
        applicationDate: '2022/1/1',
        opinion: '弄你的弄',
        approverPerson: 'bo',
        approverDate: '2022/1/1'
      },
      {
        wellName: 9527,
        applicantUnit: '第0采油作业区',
        normalDailyLiquidProduction: 1,
        normalWatery: 1,
        normalPumpCondition: '难说',
        normalSinking: 1,
        abnormalDailyLiquidProduction: '很糟糕',
        abnormalWatery: 100,
        abnormalPumpCondition: '很糟糕',
        abnormalSinking: 100,
        lastWorkoverTime: '2022/1/1',
        antiWaxMethod: '洛阳铲',
        siteDiagnostics: '没问题',
        applicationReason: '我觉得有问题',
        applicationPerson: 'boyu',
        applicationDate: '2022/1/1',
        opinion: '弄你的弄',
        approverPerson: 'bo',
        approverDate: '2022/1/1'
      },
      {
        wellName: 9527,
        applicantUnit: '第0采油作业区',
        normalDailyLiquidProduction: 1,
        normalWatery: 1,
        normalPumpCondition: '难说',
        normalSinking: 1,
        abnormalDailyLiquidProduction: '很糟糕',
        abnormalWatery: 100,
        abnormalPumpCondition: '很糟糕',
        abnormalSinking: 100,
        lastWorkoverTime: '2022/1/1',
        antiWaxMethod: '洛阳铲',
        siteDiagnostics: '没问题',
        applicationReason: '我觉得有问题',
        applicationPerson: 'boyu',
        applicationDate: '2022/1/1',
        opinion: '弄你的弄',
        approverPerson: 'bo',
        approverDate: '2022/1/1'
      },
      {
        wellName: 9527,
        applicantUnit: '第0采油作业区',
        normalDailyLiquidProduction: 1,
        normalWatery: 1,
        normalPumpCondition: '难说',
        normalSinking: 1,
        abnormalDailyLiquidProduction: '很糟糕',
        abnormalWatery: 100,
        abnormalPumpCondition: '很糟糕',
        abnormalSinking: 100,
        lastWorkoverTime: '2022/1/1',
        antiWaxMethod: '洛阳铲',
        siteDiagnostics: '没问题',
        applicationReason: '我觉得有问题',
        applicationPerson: 'boyu',
        applicationDate: '2022/1/1',
        opinion: '弄你的弄',
        approverPerson: 'bo',
        approverDate: '2022/1/1'
      },
      {
        wellName: 9527,
        applicantUnit: '第0采油作业区',
        normalDailyLiquidProduction: 1,
        normalWatery: 1,
        normalPumpCondition: '难说',
        normalSinking: 1,
        abnormalDailyLiquidProduction: '很糟糕',
        abnormalWatery: 100,
        abnormalPumpCondition: '很糟糕',
        abnormalSinking: 100,
        lastWorkoverTime: '2022/1/1',
        antiWaxMethod: '洛阳铲',
        siteDiagnostics: '没问题',
        applicationReason: '我觉得有问题',
        applicationPerson: 'boyu',
        applicationDate: '2022/1/1',
        opinion: '弄你的弄',
        approverPerson: 'bo',
        approverDate: '2022/1/1'
      },
      {
        wellName: 9527,
        applicantUnit: '第0采油作业区',
        normalDailyLiquidProduction: 1,
        normalWatery: 1,
        normalPumpCondition: '难说',
        normalSinking: 1,
        abnormalDailyLiquidProduction: '很糟糕',
        abnormalWatery: 100,
        abnormalPumpCondition: '很糟糕',
        abnormalSinking: 100,
        lastWorkoverTime: '2022/1/1',
        antiWaxMethod: '洛阳铲',
        siteDiagnostics: '没问题',
        applicationReason: '我觉得有问题',
        applicationPerson: 'boyu',
        applicationDate: '2022/1/1',
        opinion: '弄你的弄',
        approverPerson: 'bo',
        approverDate: '2022/1/1'
      }]
    }
  },

  created() {
  },

  methods: {
    getListPage(page = 1) {
      this.page = page
      teacher.getTeacherListPage(this.page, this.limit, this.teacherQuery)
        .then(response => { // 请求成功
          console.log(response)
          this.list = response.data.records
          this.total = response.data.total

          // console.log(this.list)
          // console.log(this.total)
        })
        .catch(error => { // 请求失败
          console.log(error)
        })
    },
    changePage(pageNum, pageSize) {
      this.getListPage(pageNum, pageSize, this.searchData)
    },

    // 清空方法
    resetData() {
      // 表单输入项数据清空
      this.teacherQuery = {}
      this.value = ''
      this.value01 = ''
      // 查询所有讲师数据
      this.getListPage()
    },
    goDetail(id) {
      this.drawer = true
    },
    handleClose(done) {
      this.$confirm('还有未保存的工作哦确定关闭吗？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style scoped>
.overflowAuto {
  overflow-y: auto;
  position: absolute;
  width: 100%;
  height: 100%;
}
.overflowAuto::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.overflowAuto::-webkit-scrollbar-thumb {
  background: rgb(224, 214, 235);
}

</style>
